<template>
    <div id="inewsDraggable">
        <el-button style="margin: 10px 0 0 10px" @click="disposition" >配置模板</el-button>
        <el-dialog
                title="配置模板"
                :visible.sync="dialogVisible.dialogVisible"
                width="75%">
            <ReportCenterDrag
                    v-if="dialogVisible.dialogVisible"
                    :dialogVisible="dialogVisible"
                    @toKanBan="getKanBanArr"
                    :arrKanbanFather="arrKanban"
                    :res="res"
                    :idArrObj = 'idArr'
            ></ReportCenterDrag>
            <span slot="footer" class="dialog-footer">
  </span>
        </el-dialog>
        <div>
            <!--使用draggable组件-->
            <div class="itxst">
                <div class="col rightCol" style="min-height: 300px">
                    <draggable v-model="arrKanban"   @end="end2" :options="{group:{name: 'itxst'}}"  animation="300" :move="onMove">
                        <transition-group  style="display: flex;flex-wrap: wrap;justify-content: space-between">
                            <div :class="item.id == 90 || item.id == 91 || item.id == 100 ? 'item50' :item.id == 11 ? 'item100':item.id == 4 || item.id == 41 || item.id == 40 ? 'item33' : 'item2'" v-for="(item,index) in arrKanban" :key="index" class="content">

                                <div v-if="item.id == 1">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                    <div v-for="(items,indexs) in item.data" :key = 'indexs'>
                                        <h4>{{items.title}}</h4>
                                        <div>{{items.describe}}</div>
                                    </div>
                                </div>
                                <div v-else-if="item.id == 4 ">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                </div>
                                <div v-else-if="item.id == 5">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                </div>
                                <div v-else-if="item.id == 90">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                    <div>
                                        <Cloud
                                                :cloudInewsData = item.data
                                                :inewsCloudIndex = index
                                        ></Cloud>
                                    </div>
                                </div>
                                <div v-else-if="item.id == 91">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
<!--                                    {{item.data}}-->
                                    <div>
                                        <Pie
                                                :inewsData = item.data
                                                :inewsPieIndex = index
                                        ></Pie>
                                    </div>
                                </div>
                                <div v-else-if="item.id == 92">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                    <div>
                                        <FoldingColumnMixing
                                                :FoldingData = item.data
                                                :FoldingIndex = index
                                        ></FoldingColumnMixing>
                                    </div>
                                </div>
                                <div v-else-if="item.id == 100">
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                    <!--                                    {{item.data}}-->
                                    <div>
                                        <ChinaMap
                                                :chinaData = item.data
                                                :chinaPieIndex = index
                                        ></ChinaMap>
                                    </div>
                                </div>
                                <div v-else>
                                    <el-tooltip effect="dark" content="移除" placement="right-end">
                                        <i class="el-icon-delete delete" @click="del(index)" v-if="item.id != 11"></i>
                                    </el-tooltip>                                    {{item.name}}
                                </div>
                            </div>
                        </transition-group>
                    </draggable>
                </div>

            </div>
        </div>

    </div>

</template>
<script>
    //导入draggable组件
    import draggable from 'vuedraggable'
    import Cloud from "../Cloud";
    import Pie from "../Pie";
    import ReportCenterDrag from "../ReportCenter/ReportCenterDrag";
    import FoldingColumnMixing from "../FoldingColumnMixing";
    import ChinaMap from "../ChinaMap";
    export default {
        name:'InewsDraggable',
        //注册draggable组件
        components: {
            FoldingColumnMixing,
            draggable,
            Cloud,
            Pie,
            ReportCenterDrag,
            ChinaMap
        },
        data() {
            return {
                dialogVisible:{
                    dialogVisible: false,
                },
                firstArr2:[],
                //正常使用时将idArr换位接口传递的数组  每个图表有一个唯一标识
                idArr:{
                    idArr:[4, 40, 41, 100, 90, 1, 92, 91, 90, 8],
                },
                res:{
                    "data":[
                        // { id: 11, name: '常用菜单',value:'11、常用菜单' },
                        {"group":"其他","volume":"count", "isLoading":false, "condition": {"monitorId":"", "includeList":[], "timeConfList":[{"name":"timeInfo.dispTime", "startTime":"2021-03-26 00:00:00", "endTime":"2021-04-02 23:59:59"}], "sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","name":"","monitorData":[],"describe":"今日共监测到相关新闻1716条；原载832条；转载884条；正面1589条；敏感111条；","title":"整体舆情","mediaName":"","url":""},{"date":"","summary":"","name":"","monitorData":[],"describe":"网络417条；APP362条；论坛100条；微博735条；微信102条；报道多以微博报道为主,占总新闻量的42.83%","title":"媒体分布","mediaName":"","url":""},{"date":"","summary":"","name":"","monitorData":[],"describe":"敏感信息111条；主要为微博新闻及网络新闻的//@多识鸟兽草木:23333，盘子坊和盖娅传说出来挨打！//@奶茶燕麥吃膩了:哈哈哈哈哈//@ID怎么取都像是水军啊二号:您们是怎么做到随便一搞，都比盖娅高级百倍的新闻,转载较多","title":"媒体属性","mediaName":"","url":""}],"top":0,"name":"今日概览","describe":"","id":1,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"2021-03-28","summary":"“全镇江，看奥园”奥园地产品牌发布会一作峯起。在发布会的尾声，奥园领导郑重开启项目启幕仪式，在不远的将来，即将呈现“全镇江，看奥园”的盛势。3月27日，奥园地产品牌发布会盛启，正式宣告了领先镇江十年的人居体验的到来。","name":"","monitorData":[],"describe":"正面","title":"千人！震撼！“全镇江，看奥园”奥园地产品牌发布会一作峯起、誉满镇江！","mediaName":"镇江网友之家","url":"http://bbs.my0511.com/f564b-t7893870z-1"}],"top":2000,"name":"热点新闻","describe":"","id":2,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"指数","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":1716,"name":"盖娅传说","monitorData":[{"date":"","count":417,"name":"网络"},{"date":"","count":362,"name":"APP"},{"date":"","count":100,"name":"论坛"},{"date":"","count":735,"name":"微博"},{"date":"","data":{"itemStyle":{"barBorderRadius":[5,5,0,0]},"value":102},"count":102,"name":"微信"}],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"指数模板","describe":"","id":4,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"指数","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":1716,"name":"盖娅传说","monitorData":[{"date":"","count":417,"name":"网络"},{"date":"","count":362,"name":"APP"},{"date":"","count":100,"name":"论坛"},{"date":"","count":735,"name":"微博"},{"date":"","data":{"itemStyle":{"barBorderRadius":[5,5,0,0]},"value":102},"count":102,"name":"微信"}],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"媒体参与度","describe":"","id":40,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"指数","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":1716,"name":"盖娅传说","monitorData":[{"date":"","count":417,"name":"网络"},{"date":"","count":362,"name":"APP"},{"date":"","count":100,"name":"论坛"},{"date":"","count":735,"name":"微博"},{"date":"","data":{"itemStyle":{"barBorderRadius":[5,5,0,0]},"value":102},"count":102,"name":"微信"}],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"影响力指数","describe":"","id":41,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":1716,"name":"盖娅传说","monitorData":[{"date":"","data":{"itemStyle":{"barBorderRadius":[5,5,0,0]},"value":1589},"count":1589,"name":"正面"},{"date":"","count":16,"name":"中性"},{"date":"","count":111,"name":"敏感"}],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"传播调性","describe":"","id":5,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","rate":92.6,"name":"盖娅传说","monitorData":[],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"健康率","describe":"","id":6,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":1589,"name":"正面","monitorData":[],"describe":"","title":"","mediaName":"","url":""},{"date":"","summary":"","count":111,"name":"负面","monitorData":[],"describe":"","title":"","mediaName":"","url":""},{"date":"","summary":"","count":16,"name":"中性","monitorData":[],"describe":"","title":"","mediaName":"","url":""}],"top":0,"name":"情感属性","describe":"","id":9,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false, "condition": {"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":87,"name":"今日头条","monitorData":[],"describe":"","title":"","mediaName":"","url":""}],"top":10,"name":"传播活跃媒体TOP10","describe":"","id":7,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"其他","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},"data":[{"date":"","summary":"","count":510,"name":"品牌","monitorData":[],"describe":"","title":"","mediaName":"","url":""}],"top":50,"name":"热门主题词","describe":"","id":8,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]},
                        {"group":"图表","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},
                            "data":[
                                {
                                    "name": "正面",
                                    "value": 40761
                                },
                                {
                                    "name": "中性",
                                    "value": 24112
                                },
                                {
                                    "name": "敏感",
                                    "value": 6252
                                }
                            ],

                            "top":50,
                            "name":"饼图","describe":"","id":91,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]
                        },
                        {"group":"图表","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},
                            "data":[
                                {name: '南海诸岛', value: 0},
                                {name: '北京', value: 2170.7},
                                {name: '天津', value: 1559.6},
                                {name: '上海', value: 2423.78},
                                {name: '重庆', value: 3048.43},
                                {name: '河北', value: 7556.3},
                                {name: '河南', value: 9605},
                                {name: '云南', value: 4800.5},
                                {name: '辽宁', value: 4359.3},
                                {name: '黑龙江', value: 3788.7},
                                {name: '湖南', value: 6860.2},
                                {name: '安徽', value: 6323.6},
                                {name: '山东', value: 10047.2},
                                {name: '新疆', value: 2444.67},
                                {name: '江苏', value: 8029.3},
                                {name: '浙江', value: 5737},
                                {name: '江西', value: 4622.1},
                                {name: '湖北', value: 5917},
                                {name: '广西', value: 4885},
                                {name: '甘肃', value: 2625.71},
                                {name: '山西', value: 3702.35},
                                {name: '内蒙古', value: 2534},
                                {name: '陕西', value: 3835.44},
                                {name: '吉林', value: 2717.43},
                                {name: '福建', value: 3941},
                                {name: '贵州', value: 3580},
                                {name: '广东', value: 11346},
                                {name: '青海', value: 3983.8},
                                {name: '西藏', value: 3371.5},
                                {name: '四川', value: 8341},
                                {name: '宁夏', value: 681.79},
                                {name: '海南', value: 925.76},
                                {name: '台湾', value: 2369},
                                {name: '香港', value: 748.25},
                                {name: '澳门', value: 63.2}
                            ],
                            "top":50,
                            "name":"中国地图","describe":"","id":100,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]
                        },
                        {"group":"图表","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},
                            "data":[
                                {
                                    name:"其他",
                                    negative:19505,
                                    neuter:8305,
                                    front:3672,
                                },
                                {
                                    name:"北京",
                                    negative:1950,
                                    neuter:8305,
                                    front:3672,
                                },
                                {
                                    name:"广东省",
                                    negative:19505,
                                    neuter:805,
                                    front:367
                                },
                                {
                                    name:"上海",
                                    negative:19505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"浙江",
                                    negative:1505,
                                    neuter:830,
                                    front:367
                                },
                                {
                                    name:"山东",
                                    negative:9505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"江苏",
                                    negative:1905,
                                    neuter:8305,
                                    front:672
                                },
                                {
                                    name:"四川",
                                    negative:9505,
                                    neuter:805,
                                    front:367
                                },
                                {
                                    name:"其他",
                                    negative:19505,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"北京",
                                    negative:1950,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"广东省",
                                    negative:19505,
                                    neuter:805,
                                    front:3672
                                },
                                {
                                    name:"上海",
                                    negative:19505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"浙江",
                                    negative:1505,
                                    neuter:830,
                                    front:367
                                },
                                {
                                    name:"山东",
                                    negative:9505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"江苏",
                                    negative:1905,
                                    neuter:8305,
                                    front:672
                                },
                                {
                                    name:"四川",
                                    negative:9505,
                                    neuter:805,
                                    front:367
                                },
                                {
                                    name:"其他",
                                    negative:19505,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"北京",
                                    negative:1950,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"广东省",
                                    negative:19505,
                                    neuter:805,
                                    front:3672
                                },
                                {
                                    name:"上海",
                                    negative:19505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"浙江",
                                    negative:1505,
                                    neuter:830,
                                    front:367
                                },
                                {
                                    name:"山东",
                                    negative:9505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"江苏",
                                    negative:1905,
                                    neuter:8305,
                                    front:672
                                },
                                {
                                    name:"四川",
                                    negative:9505,
                                    neuter:805,
                                    front:367
                                },
                                {
                                    name:"其他",
                                    negative:19505,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"北京",
                                    negative:1950,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"广东省",
                                    negative:19505,
                                    neuter:805,
                                    front:3672
                                },
                                {
                                    name:"上海",
                                    negative:19505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"浙江",
                                    negative:1505,
                                    neuter:830,
                                    front:367
                                },
                                {
                                    name:"山东",
                                    negative:9505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"江苏",
                                    negative:1905,
                                    neuter:8305,
                                    front:672
                                },
                                {
                                    name:"四川",
                                    negative:9505,
                                    neuter:805,
                                    front:367
                                },
                                {
                                    name:"其他",
                                    negative:19505,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"北京",
                                    negative:1950,
                                    neuter:8305,
                                    front:3672
                                },
                                {
                                    name:"广东省",
                                    negative:19505,
                                    neuter:805,
                                    front:3672
                                },
                                {
                                    name:"上海",
                                    negative:19505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"浙江",
                                    negative:1505,
                                    neuter:830,
                                    front:367
                                },
                                {
                                    name:"山东",
                                    negative:9505,
                                    neuter:8305,
                                    front:372
                                },
                                {
                                    name:"江苏",
                                    negative:1905,
                                    neuter:8305,
                                    front:672
                                },
                                {
                                    name:"四川",
                                    negative:9505,
                                    neuter:805,
                                    front:367
                                }
                            ],
                            "top":50,
                            "name":"柱状图","describe":"","id":92,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]
                        },
                        {"group":"图表","volume":"count","isLoading":false,"condition":{"monitorId":"","includeList":[],"timeConfList":[{"name":"timeInfo.dispTime","startTime":"2021-03-26 00:00:00","endTime":"2021-04-02 23:59:59"}],"sortConfList":[],"index":"","pageSize":1,"fieldShouldList":[],"orgId":"","sourceType":"","excludeList":[],"from":0,"page":1,"fieldList":[{"name":"monitorProcess.orgs","relationOperator":"Equal","value":"868"}]},
                            "data":[
                                {
                                    "name": "优惠",
                                    "value": 4496
                                },
                                {
                                    "name": "车型",
                                    "value": 3932
                                },
                                {
                                    "name": "询价",
                                    "value": 3358
                                },
                                {
                                    "name": "奥迪",
                                    "value": 3195
                                },
                                {
                                    "name": "价格",
                                    "value": 2165
                                },
                                {
                                    "name": "详情",
                                    "value": 2087
                                },
                                {
                                    "name": "TFSI",
                                    "value": 2024
                                },
                                {
                                    "name": "置换",
                                    "value": 1932
                                },
                                {
                                    "name": "新增",
                                    "value": 1816
                                },
                                {
                                    "name": "北京",
                                    "value": 1756
                                },
                                {
                                    "name": "促销",
                                    "value": 1597
                                },
                                {
                                    "name": "时间",
                                    "value": 1540
                                },
                                {
                                    "name": "截至",
                                    "value": 1522
                                },
                                {
                                    "name": "汽车",
                                    "value": 1449
                                },
                                {
                                    "name": "市场",
                                    "value": 1442
                                },
                                {
                                    "name": "欢迎",
                                    "value": 1393
                                },
                                {
                                    "name": "公司",
                                    "value": 1356
                                },
                                {
                                    "name": "车充足",
                                    "value": 1351
                                },
                                {
                                    "name": "宝马",
                                    "value": 1348
                                },
                                {
                                    "name": "万元",
                                    "value": 1346
                                },
                                {
                                    "name": "病例",
                                    "value": 1277
                                },
                                {
                                    "name": "确诊病例",
                                    "value": 1263
                                },
                                {
                                    "name": "数据",
                                    "value": 1232
                                },
                                {
                                    "name": "店内",
                                    "value": 1109
                                },
                                {
                                    "name": "本土",
                                    "value": 1091
                                },
                                {
                                    "name": "境外输入",
                                    "value": 1060
                                },
                                {
                                    "name": "报告",
                                    "value": 995
                                },
                                {
                                    "name": "服务",
                                    "value": 977
                                },
                                {
                                    "name": "可以",
                                    "value": 967
                                },
                                {
                                    "name": "关注",
                                    "value": 941
                                },
                                {
                                    "name": "疫情",
                                    "value": 938
                                },
                                {
                                    "name": "客户",
                                    "value": 934
                                },
                                {
                                    "name": "中国",
                                    "value": 922
                                },
                                {
                                    "name": "以下",
                                    "value": 875
                                },
                                {
                                    "name": "品牌",
                                    "value": 868
                                },
                                {
                                    "name": "工作",
                                    "value": 866
                                },
                                {
                                    "name": "quattro",
                                    "value": 859
                                },
                                {
                                    "name": "直播",
                                    "value": 845
                                },
                                {
                                    "name": "换手",
                                    "value": 813
                                },
                                {
                                    "name": "手率",
                                    "value": 812
                                },
                                {
                                    "name": "排名",
                                    "value": 800
                                },
                                {
                                    "name": "无症状感染者",
                                    "value": 790
                                },
                                {
                                    "name": "确诊",
                                    "value": 770
                                },
                                {
                                    "name": "累计",
                                    "value": 761
                                },
                                {
                                    "name": "增长",
                                    "value": 753
                                },
                                {
                                    "name": "上涨",
                                    "value": 731
                                },
                                {
                                    "name": "充足",
                                    "value": 725
                                },
                                {
                                    "name": "豪华",
                                    "value": 713
                                },
                                {
                                    "name": "项目",
                                    "value": 678
                                },
                                {
                                    "name": "发展",
                                    "value": 651
                                }
                            ],
                            "top":50,"name":"词云","describe":"","id":90,"sort":[{"name":"timeInfo.disptime","value":"desc"}],"fields":[]}
                    ],"reportTitle":{"color":"#999","title":"舆情报告","imgBackground":"http://inews5.xlmediawatch.com/reportFile/asslog/9593/bannersimg.png","nowTime":"时间"},"config":{"imgUrl":"http://inews5.xlmediawatch.com/reportFile/bannerNewWeekly.png","title":"舆情报告", "regUrl":"http://59.110.22.117/wechat/sign"},
                },
                //定义要被拖拽对象的数组
                arrList:[
                ],
                arrKanban:[
                    // { id: 11, name: '常用菜单',value:'11、常用菜单' },
                ],
                moveId:-1
            };
        },
        methods: {
            async disposition(){
                this.idArr.idArr = []
                await this.getIdArr(this.arrKanban)
                this.dialogVisible.dialogVisible = true
            },
            getKanBanArr(data){
                this.idArr.idArr = data
                this.arrKanban = []
                this.getArrKanBan(this.idArr.idArr)
            },
            del(index){
                this.arrKanban.splice(index,1)
            },
            save(){
                this.idArr.idArr = []
                this.getIdArr(this.arrKanban)
                // this.dialogVisible = false
            //    正常使用点击保存时将idArr传入接口
            },
            //得到idArr数组
            getIdArr(arr){
                arr.map((item) => {
                    this.idArr.idArr.push(item.id)
                })

            },
            //随机色
            createRandomItemStyle(){
                return 'rgb(' + [
                    Math.round(Math.random()*180),
                    Math.round(Math.random()*180),
                    Math.round(Math.random()*360)
                ].join(',')+')'
            },
            createRandomValue(){
                return Math.round(Math.random()*1000)
            },
            //左边往右边拖动时的事件
            end1(e){
                console.log(e)
                var that=this;
                var  items=this.arrKanban.filter(function(m){
                    return  m.id==that.moveId
                })
                console.log(this.res.data)

                //如果左边
                if(items.length<2) return;
                this.arrKanban.splice(e.newDraggableIndex, 1)
            },
            //右边往左边拖动时的事件
            end2(e){
                console.log(e)
                var that=this;
                var  items=this.arrList.filter(function(m){
                    return  m.id==that.moveId
                })
                console.log(this.res.data)

                // console.log(items)
                // console.log(e.newDraggableIndex)
                //如果左边
                if(items.length<2) return;
                // this.arrList.splice(e.newDraggableIndex, 1)
            },
            //move回调方法
            onMove(e){
                // onMove(e,originalEvent){
                this.moveId=e.relatedContext.element.id;
                //不允许停靠
                if (e.relatedContext.element.id == 11) return false;
                //不允许拖拽
                // if (e.draggedContext.element.id == 4) return false;
                if (e.draggedContext.element.id == 11) return false;
                return true;
            },
            getArrKanBan(arr){
                for(let index in arr){
                    for(let innerIndex in this.arrList){
                        if(arr[index] == this.arrList[innerIndex].id){
                            this.arrKanban.push(this.arrList[innerIndex])
                        }
                    }
                }
            }
        },
        created() {
            this.arrList = this.res.data
            this.getArrKanBan(this.idArr.idArr)
        }
    };
    Array.prototype.filter = Array.prototype.filter || function(func) {
        var arr = this;
        var r = [];
        for (var i = 0; i < arr.length; i++) {
            if (func(arr[i],i,arr)) {
                r.push(arr[i]);
            }
        }
        return r;
    }
</script>
<style scoped>
    .itxst {
        display: flex;
        margin: 10px;
        text-align :left;
        flex-wrap: wrap;
    }
    .col {
        /*width: 40%;*/
        /*flex: 1;*/
        padding: 10px;
        border: solid 1px #eee;
        border-radius: 5px;
        float: left;
    }
    .leftCol{
        width: 20%;
        background-color: #eee;
    }
    .rightCol{
        width: 100%;
        background-color: #eee;
    }
    .col + .col {
        margin-left: 10px;
    }
    .item {
        padding: 6px 12px;
        margin-bottom: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
    }


    .item2 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 100%;

    }

    .item50 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 44%;
    }
    .item33 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 27%;

    }
    .item100 {
        padding: 6px 12px;
        margin-top: 10px;
        border: solid 1px rgba(0, 183, 255, 0.93);
        border-radius: 7px;
        background-color: white;
        text-align: left;
        color: rgba(0, 183, 255, 0.93);
        font-size: 14px;
        width: 100%;
    }
    .item33:hover,
    .item50:hover,
    .item2:hover {
        outline: solid 1px #ddd;
        cursor: move;
    }
    .delete{
        margin-top: 2px;
        float: right;
    }
    .delete:hover{
        cursor:pointer;
    }

</style>
<style>

    #inewsDraggable .el-dialog{
        min-width: 780px!important;
    }
</style>